<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      unique-opened
      router
    >
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-submenu :index="item.index + ''" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu
                v-if="subItem.subs"
                :index="subItem.index + ''"
                :key="subItem.index"
              >
                <template slot="title">
                  <i :class="subItem.icon"></i>
                  {{ subItem.title }}
                </template>
                <!-- -------------------------------------------------------------------------------------- -->
                <!-- <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index + ''">{{ threeItem.title }}</el-menu-item> -->

                <template v-for="threeItem in subItem.subs">
                  <el-submenu
                    v-if="threeItem.subs"
                    :index="threeItem.index + ''"
                    :key="threeItem.index"
                  >
                    <template slot="title">
                      &nbsp;&nbsp;<i :class="threeItem.icon"></i>
                      <span slot="title">{{ threeItem.title }}</span>
                    </template>
                    <!-- 4 -->
                    <el-menu-item
                      v-for="(fourItem, indexD) in threeItem.subs"
                      :key="indexD"
                      :index="fourItem.index + ''"
                      >{{ fourItem.title }}</el-menu-item
                    >
                  </el-submenu>
                  <el-menu-item
                    v-else
                    :index="threeItem.index + ''"
                    :key="threeItem.title"
                    >{{ threeItem.title }}</el-menu-item
                  >
                </template>
                <!-- --------------------------------------------------------------------------------------------- -->
              </el-submenu>
              <el-menu-item
                v-else
                :index="subItem.index + ''"
                :key="subItem.index"
              >
                <i :class="subItem.icon"></i>
                {{ subItem.title }}
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import items from "@/assets/json/sidebar.json";
export default {
  data() {
    return {
      items: items,
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    },
  },

  methods: {},

  created() {},
  mounted() {},
};
</script>

<style >
.el-menu {
  text-align: left;
  font-size: 13px !important;
}
.el-submenu__title,
.el-menu-item {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  background-color: #fff;
}
.el-submenu .el-menu-item {
  height: 32px;
  line-height: 32px;
}
.el-icon-arrow-down:before {
  content: "\E790";
}
.el-icon-caret-right {
  height: 21px !important;
}
.el-submenu__icon-arrow {
  margin-top: -5px;
}
.el-submenu [class^="el-icon-"] {
  margin-right: 0;
}
</style>
